import { Button, Input, InputNumber,message } from 'antd';
import React from 'react';
import {PlusOutlined} from  '@ant-design/icons';
class NewProjectFour extends React.Component {
    constructor(props) {
        super(props);
        let storageData = JSON.parse(sessionStorage.getItem('newInnovationProject_four'))
        this.state = { 
            datas:storageData||[{}]
         };
    }
    componentDidMount(){
        this.props.onRef(this)
    }
    addItem=()=>{
        let {datas}=this.state
        datas.push({budgetName:'',budget:0})

        this.setState({
            datas
        })
    }
    deleteItem=(index)=>{
        let {datas}=this.state
        datas.splice(index,1)
        this.setState({datas})
    }
    handleChange=(index,type,e)=>{
        const {datas}=this.state
        switch(type){
            case 'text':
                datas[index].budgetName=e.target.value
                break;
            case 'number':
                datas[index].budget=e
                break;
            default:break;
        }
        this.setState({datas})
        console.log(datas)
    }
    saveDatas=()=>{
        let {datas}=this.state
        if(datas.length===0){
            message.error('至少输入一个预算项目')
            return;
        }
        sessionStorage.setItem('newInnovationProject_four',JSON.stringify(datas))
        return true

    }
    render() {
        const {datas}=this.state
        
        return (
            <div>
                <div style={{margin:10}}>
                <Button onClick={this.addItem} type={'primary'} icon={<PlusOutlined />}>增加</Button>
                </div>
               {datas.map((item,index)=>{
                   return<div key={index} style={{margin:3}}>
                   <span>
                        <strong>预算名称{datas.length>1?`(${index+1})`:''}：</strong>
                       <Input style={{width:250}} onChange={this.handleChange.bind(this,index,'text')} placeholder={'请输入'} value={item.budgetName}/>
                   </span>
                   <span style={{marginLeft:5}}>
                       <strong>预算金额：</strong>
                       <span><InputNumber onChange={this.handleChange.bind(this,index,'number')} placeholder={'请输入'} value={item.budget} style={{width:250}} min={0}/></span>
                   </span>
                   {datas.length>1&&<a onClick={this.deleteItem.bind(this,index)}>删除</a>}
               </div>
               }) }
                              
            </div>
        );
    }
}

export default NewProjectFour;